<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>字典列表</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../../static/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" th:href="@{static/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css}"/>
    <link rel="stylesheet" href="../../../static/plugins/layui/css/layui.css" th:href="@{static/plugins/layui/css/layui.css}"/>
</head>
<body>

<div style="padding: 10px">
    <hr class="layui-bg-green" style="margin-left: 20px;">
    <div class="layui-container">
        <div class="layui-row layui-col-space30">
            <!-- 左侧部分 -->
            <div class="layui-col-xs4">
                <div class="layui-form">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 200px">
                            <input class="layui-input" type="text" id="conditionMenuName" autocomplete="off" placeholder="请输入名称" >
                        </div>
                        <button class="layui-btn layui-btn-sm" id="searchBtn"><i class="layui-icon">&#58901;</i>&nbsp;&nbsp;查询</button>
                    </div>
                </div>
                <div style="margin-top:15px;padding-top:10px ;height: 400px;overflow-y: auto;border: 1px solid #e2e2e2;">
                    <ul id="treeBox" style="margin-left: 30px;margin-top: 10px;" class="ztree"></ul>
                </div>
            </div>
            <!-- 右侧部分 -->
            <div class="layui-col-xs8">
                <div class="layui-btn-group" >
                    <button class="layui-btn" id="addBtn">新增</button>
                    <button class="layui-btn" id="modBtn">修改</button>
                    <button class="layui-btn" id="removeBtn">删除</button>
                    <button class="layui-btn layui-btn-disabled" id="saveBtn" disabled>保存</button>
                </div>
                <div style="margin-top:10px;padding:10px ;height: 390px;overflow-y: auto;border: 1px solid #e2e2e2;">
                    <form class="layui-form">
                        <!-- 表单内容 -->
                        <div class="layui-form-item">
                            <input type="hidden" id="treeId"/>
                            <input type="hidden" name="sd00" id="sd00"/>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">唯一标识</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="sd02" id="sd02"  autocomplete="off" disabled/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">节点名称</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="sd01" id="sd01" autocomplete="off" disabled/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属父节点</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="sd04" id="sd04" autocomplete="off" disabled/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否启用</label>
                            <div class="layui-input-inline" style="float: left;width: 75%">
                                <input type="radio" name="sd10" lay-skin="primary" title="启用" value="1" checked/>
                                <input type="radio" name="sd10" lay-skin="primary" title="禁用" value="0"/>
                            </div>
                        </div>
                        <div class="layui-form-item ">
                            <label class="layui-form-label">备注信息</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea"  name="sd05" id="sd05" autocomplete="off" disabled></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../../../static/plugins/layui/layui.js" th:src="@{static/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/plugins/zTree_v3/js/jquery-1.4.4.min.js" th:src="@{static/plugins/zTree_v3/js/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" src="../../../static/plugins/zTree_v3/js/jquery.ztree.core.js" th:src="@{static/plugins/zTree_v3/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" src="../../../static/plugins/zTree_v3/js/jquery.ztree.exhide.js" th:src="@{static/plugins/zTree_v3/js/jquery.ztree.exhide.js}"></script>

<script type="text/javascript">

    layui.use(['form','layer','jquery'], function () {
        var layer = layui.layer;
        var form = layui.form;
        // var $ = layui.$;//此处不要引入layui内置jquery，否则会与ztree的冲突

        //初始化 tree
        var zTreeObj;
        var setting = {
            async: {
                enable: true,
                url: 'sysDic/getSysDics',
                dataType: 'json'
            },
            data: {
                key: {
                    name : 'sd01',
                    title: ''
                },
                simpleData : {
                    enable : true,
                    idKey : 'sd02',
                    pIdKey :'sd03'
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {//节点点击事件
                    $('#treeId').val(treeId);
                    $.ajax({
                        url:'sysDic/getSysDic',
                        type: 'post',
                        data:{sd00:treeNode.sd00},
                        dataType:'json',//服务器返回的数据类型。
                        success: function(data) {
                            $('#sd00').val(data.sd00);
                            $('#sd01').val(data.sd01);
                            $('#sd02').val(data.sd02);
                            $('#sd04').val(data.sd04);
                            $('#sd05').val(data.sd05);
                            //回显 radio 的值
                            $(':radio[name=\'sd10\'][value=\'' + data.sd10 + '\']').prop('checked', 'checked');

                            //字段
                            $('#sd01,#sd04,#sd05').attr("disabled",true);
                            //按钮
                            $('#addBtn,#modBtn,#removeBtn').attr("disabled",false).removeClass('layui-btn-disabled');
                            $('#saveBtn').attr("disabled",true).addClass('layui-btn-disabled');

                            //重新渲染表单
                            form.render();
                        },
                        error:function(response){
                        }
                    });
                },
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    var zTree = $.fn.zTree.getZTreeObj(treeId);
                    zTree.expandAll(true);//展开所有节点
                    // zTree.expandNode(zTree.getNodes()[0], true, false, false);//展开第一级节点
                }
            }
        };
        //加载树
        var zNodes = [];
        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeBox"), setting, zNodes);
        });

        //查询
        $("#searchBtn").click(function(){
            var conditionMenuName = $("#conditionMenuName").val();
            doSearchByTreeName('treeBox', 'sd01', conditionMenuName);
        });

        var flag;//操作 标志
        //新增
        $('#addBtn').click(function () {
            if(!$('#sd01').val()){
                layer.msg("请指定一个父节点",{icon:5,time:2000});
            }else{
                flag = 'add';
                //字段
                $('#sd01,#sd05').attr("disabled",false).val('');
                //封印 按钮
                $('#addBtn,#modBtn,#removeBtn').attr("disabled",true).addClass('layui-btn-disabled');
                //解禁 按钮
                $('#saveBtn').attr("disabled",false).removeClass('layui-btn-disabled');
                form.render();
            }
        });
        //修改
        $('#modBtn').click(function () {
            if(!$('#sd01').val()){
                layer.msg("请先选中一个节点",{icon:5,time:2000});
            }else{
                flag = 'mod';
                //字段
                $('#sd01,#sd05').attr("disabled",false);
                //按钮
                $('#addBtn,#modBtn,#removeBtn').attr("disabled",true).addClass('layui-btn-disabled');
                $('#saveBtn').attr("disabled",false).removeClass('layui-btn-disabled');
                //渲染 表单
                form.render();
            }
        });
        //删除
        $('#removeBtn').click(function () {
            //判断当前节点是否含有子节点
            var zTree = $.fn.zTree.getZTreeObj($('#treeId').val());
            var node = zTree.getSelectedNodes()[0];

            if(!$('#sd01').val()){
                layer.msg("请先选中一个节点",{icon:5,time:2000});
            } else if($('#sd00').val() === '00001'){
                layer.msg("当前节点不允许删除",{icon:5,time:2000});
            }else if(node.isParent){
                layer.msg("不能删除含有子节点的节点",{icon:5,time:2000});
            }else{
                layer.confirm('are you OK ?',{icon: 3, title:'提示'}, function (index) {
                    $.ajax({
                        url: 'sysDic/removeSysDic',
                        type: 'post',
                        data: {sd00: $('#sd00').val()},
                        dataType: 'json',//服务器返回的数据类型。
                        success: function (data) {
                            if(data.code === 0){
                                zTreeObj = $.fn.zTree.init($("#treeBox"), setting, zNodes);//重新加载树
                                layer.msg("删除成功", {icon: 1, time: 1500});
                            }else{
                                layer.msg("删除失败", {icon: 5, time: 1500});
                            }
                        },
                        error: function (e) {
                        }
                    });
                    layer.close(index);
                });
            }
        });

        //保存
        $('#saveBtn').click(function () {
            if(flag == 'add'){
                if(!$('#sd01').val()){
                    layer.msg("节点名称不能为空", {icon: 5, time: 1500});
                }else{
                        $.ajax({
                            url: 'sysDic/addSysDic',
                            type: 'post',
                            data: {
                                sd01:$('#sd01').val(),
                                sd02:$('#sd02').val(),
                                sd04:$('#sd04').val(),
                                sd05:$('#sd05').val(),
                                sd10:$("input[name='sd10']:checked").val()
                            },
                            dataType: 'json',
                            success: function (data) {
                                if(data.code === 0){
                                    zTreeObj = $.fn.zTree.init($("#treeBox"), setting, zNodes);//重新加载树
                                    layer.msg("保存成功", {icon: 1, time: 1500});
                                }else{
                                    layer.msg("保存失败", {icon: 5, time: 1500});
                                }
                            },
                            error: function (e) {
                            }
                        });
                }
            }
            if(flag == 'mod'){
                if(!$('#sd01').val()){
                    layer.msg("节点名称不能为空", {icon: 5, time: 1500});
                }else{
                        $.ajax({
                            url: 'sysDic/modSysDic',
                            type: 'post',
                            data: {
                                sd00:$('#sd00').val(),
                                sd01:$('#sd01').val(),
                                sd05:$('#sd05').val(),
                                sd10:$("input[name='sd10']:checked").val()
                            },
                            dataType: 'json',
                            success: function (data) {
                                if(data.code === 0){
                                    zTreeObj = $.fn.zTree.init($("#treeBox"), setting, zNodes);//重新加载树
                                    layer.msg("修改成功", {icon: 1, time: 1500});
                                }else{
                                    layer.msg("修改失败", {icon: 5, time: 1500});
                                }
                            },
                            error: function (e) {
                            }
                        });
                }
            }
        });



    });

    /* 按名称匹配树 */
    var nodeList = [];
    function doSearchByTreeName(treeId, searchKey, searchValue) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var allNodes = treeObj.transformToArray(treeObj.getNodes());
        treeObj.hideNodes(allNodes);
        nodeList = treeObj.getNodesByParamFuzzy(searchKey, searchValue, null);
        nodeList = treeObj.transformToArray(nodeList);
        for (var n in nodeList) {
            findParent(treeObj, nodeList[n]);
        }
        treeObj.showNodes(nodeList);
        if (searchValue == "") {
            treeObj.expandAll(false);
        }
    }
    // 查找父节点
    function findParent(treeObj, node) {
        treeObj.expandNode(node, true, false, false);
        var pNode = node.getParentNode();
        if (pNode != null) {
            nodeList.push(pNode);
            findParent(treeObj, pNode);
        }
    }

</script>
</body>
</html>